<template>
  <div class="box">pinia</div>
  <el-button @click="handleClick">点击</el-button>
  <div>数字: {{ count }}</div>
  <el-button @click="handleEditName">修改名字</el-button>
  <div>名字: {{ name }}</div>
  <el-button @click="handleEditAge">修改年龄</el-button>
  <div>年龄: {{ useAgeStore.age }}</div>
  <el-button @click="handleEditNumber">修改数字</el-button>
  <div>数字: {{ number }}</div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue'
import useDemo from '@/stores/demo'
import useAge from '@/stores/age'
import { storeToRefs } from 'pinia'
const useDemoStore = useDemo()

const handleEditNumber = () => {
    useDemoStore.$patch({
        number: 20
    })
}
const useAgeStore = useAge()
const { count, name, number } = storeToRefs(useDemoStore)
const handleClick = () => {
    (useDemoStore.count as number)++
    localStorage.setItem('storeCount', useDemoStore.count.toString())
}
const handleEditName = () => {
    useDemoStore.changeName('我是新的名字')
}
const handleEditAge = () => {
    useDemoStore.changeAge()
}
</script>

<style lang="less" scoped>
.box {
}
</style>
